<MDXHeader title="SolidStart" description="Install and configure SolidStart." />

<Steps>

### Create project

Start by creating a new SolidJS project using `solid-start`:

```bash
npm init solid@latest
```

When asked make sure to use the template `with-tailwindcss`:

```txt showLineNumbers
Project Name? my-app
Is this a Solid-Start project? yes
Which template would you like to use? with-tailwindcss
Use TypeScript? yes
```

### Run the CLI

Run the `solidui-cli` init command to setup your project:

```bash
npx solidui-cli@latest init
```

### Configure ui.config.json

You will be asked a few questions to configure `ui.config.json`:

```txt showLineNumbers
Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/app.css
Where is your tailwind.config.js located? tailwind.config.cjs
Configure the import alias for the src directory: ~/*
```

### Fonts

I use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font.

Here's how I configure Inter for SolidStart:

**1. Install the fontsource package:**

```bash
npm install @fontsource/inter
```

**2. Import the font in the `app.tsx`:**

```tsx {8}
import { Suspense } from "solid-js"

import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start/router"

import Nav from "~/components/Nav"

import "@fontsource/inter"
import "./app.css"

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <Nav />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
```

**1. Configure `theme.extend.fontFamily` in `tailwind.config.cjs`**

```js {9-11}
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["variant", [".dark &", '[data-kb-theme="dark"] &']],
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...fontFamily.sans]
      }
    }
  }
  // ...
}
```

### App structure

Here's how I structure my Solid apps. You can use this as a reference:

```txt {7-11,15-16}
.
├── public
│   ├── favicon.ico
│   └── ...
├── src
│   ├── components
│   │   ├── ui
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   ├── lib
│   │   └── utils.ts
│   ├── routes
│   │   ├── [...404].tsx
│   │   ├── index.tsx
│   │   └── ...
│   ├── app.css
│   ├── app.tsx
│   └── ...
├── app.config.ts
├── tailwind.config.cjs
└── ...
```

- I place the UI components in the `components/ui` folder.
- The rest of the components such as `<PageHeader />` or `<MainNav />` are placed in the `components` folder.
- The `lib` folder contains all the utility functions. I have a `utils.ts` where I define the `cn` helper.

### That's it

You can now start adding components to your project.

```bash
npx solidui-cli@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers
import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

</Steps>
